<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
				float: left;
				padding:12px;
				line-height: 12px;
				text-align: center;					
			}
			li a{
				color: #2D93CA;
			}
			.first,.prev,.next,.last{
				border: 1px solid #ddd;
			}
			.first{
				border-top-left-radius: 5px;
				border-bottom-left-radius: 5px;
			}
			.last{
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
			}
			.prev{
				border-left:none;
			}
			.last{
				border-left:none;
			}
			.next{
				border-left:none;
			}
			li a{
				text-decoration: none;
			}
			.page{
				border: 1px solid #ddd;
			}
			.page{
				border-left:none;
			}			
			.active{
				background:deepskyblue;
			}
			.active a{				
				color:#fff;
			}
		</style>
				
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jqPaginator.js"></script>
		
	</head>
	<body>
		
		<div id="page2" class="m-pagination"></div>	
		<script>
	
			$('#page2').jqPaginator({
			    totalPages: 50,
			    visiblePages: 10,
			    currentPage: 1,			
			    first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
			    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
			    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
			    last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
			    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
			    onPageChange: function (num) {
			        $('#text').html('当前第' + num + '页');
			    }
			});
		</script>
	</body>
</html>
